<template>
    <div>
        <div class="demo">
            <!-- 右侧固定定位 -->
            <div class="Contact">
                <div class="QQ">
                    <p class="contact_public"></p>
                    <span>334783810</span>
                </div>
                <div class="tel">
                    <p class="contact_public"></p>
                     <span>15811349606</span>
                </div>
                <div class="wechart">
                     <p class="contact_public"></p>
                     <div>
                     </div>
                </div>
            </div>
            <div class="banxin_top">
                <!-- 轮播图 -->
                <div class="lunbotu">
                     <!-- swiper开始 -->
                            <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="tu tu1"></div>
                                        </div>
                                        <div class="swiper-slide">
                                             <div class="tu tu2"></div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="tu tu3"></div>
                                        </div>
                                    </div>
                                    <!-- 如果需要分页器 -->
                                    <div class="swiper-pagination"></div>
                                    <!-- 如果需要导航按钮 -->
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>
                                    
                                    <!-- 如果需要滚动条 -->
                            <div class="swiper-scrollbar"></div>
                        </div>
                        <!-- swiper结束 -->
                    <!-- 版心 -->
                    <div class="banxin">
                        <div class="top_section">
                            <!-- 头部 -->
                        <div class="top">
                            <div class="top_left">
                                
                            </div>
                            <div class="top_center">
                                <ul>
                                    <li>首页</li>
                                    <li>解决方案</li>
                                    <li>人才测评</li>
                                    <li>购买</li>
                                </ul>
                            </div>
                            <div class="top_right">
                                <span>企业</span>
                                <span>个人</span>
                            </div>
                        </div>
                        <!-- 了解更多按钮 -->
                        <!-- <div class="btn">
                            了解更多
                            <p></p>
                        </div> -->
                        <!-- 了解更多按钮结束 -->
                    </div>
                </div>
                   <!-- 轮播图结束 -->
            </div>
            <!-- 版心结束 -->
            </div>
            <div class="banxin_center1">
                <div class="banxin">
                     <div class="center1_top">企业应用范围</div>
                     <div class="center1_ct">Enterprise application scope</div>
                     <div class="center1_bt">
                         智亘网络科技有限公司是一家专业的企业人才测评云服务商，是国内企业综合测评的先行者，致力于自助式企业管理诊断工具的研发和推广。历经十余年管理咨询经验的沉淀和提炼，开发出一系列面向个人和面向企业的测评工具。
                    </div>
                    <div class="center1_bt">
                         “智亘 DISC”测评软件是最科学最全面的DISC测评系统，是公司的核心产品。智亘网络科技有限公司利用移动互联网技术，打造高便利性、高性价比、自动化的测评产品。智亘网络科技有限公司一直致力于在人才招聘、人才发展、人才盘点、组织发展等专业领域为客户提供优质的服务。
                    </div>
                   <div class="center1_footer">
                       <div class="quan_img"></div>
                   </div>
                </div>
            </div>
            <div class="banxin_center2">
                <div class="banxin">
                    <div class="center2_top">三个简单步骤 <span>完成人才测评</span></div>
                    <div class="center2_center">Three simple steps to complete the talent assessment</div>
                    <div class="center2_img"></div>
                    <div class="button">
                        了解更多
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="banxin_center3">
                 <div class="banxin">
                    <div class="center3_top">
                        产品与服务
                    </div>
                    <div class="center3_center">
                        Products and services
                    </div>
                    <div class="center3_bottom">
                        <ul>
                            <li>
                                <p class="cneter3_top">校园招聘解决方案</p>
                                <p class="line"></p>
                                <p class="cneter3_content">通过能力、性格、心理健康等维度进行职场预测选择最符合岗位要求与企业气质的应届生。</p>
                                <p class="cneter3_bottom"></p>
                            </li>
                            <li>
                                <p class="cneter3_top">社会招聘解决方案</p>
                                <p class="line"></p>
                                <p class="cneter3_content">以岗位素质模型为基础，通过场景化测试题目，考察候选人的胜任素质，做到精准招聘。</p>
                                <p class="cneter3_bottom"></p>
                            </li>
                            <li>
                                <p class="cneter3_top">人才发展解决方案</p>
                                <p class="line"></p>
                                <p class="cneter3_content">从领导能力、管理技巧和领导风格综合评价管理层水平，帮助培养和选拔优秀管理人才。</p>
                                <p class="cneter3_bottom"></p>
                            </li>
                            <li>
                                <p class="cneter3_top">人才盘点解决方案</p>
                                <p class="line"></p>
                                <p class="cneter3_content">盘点人员能力、个性、价值观、动机等，发掘高潜人才，建立完善继任计划。</p>
                                <p class="cneter3_bottom"></p>
                            </li>
                            <li>
                                <p class="cneter3_top">组织发展解决方案</p>
                                <p class="line"></p>
                                <p class="cneter3_content">从团队气氛、执行力、敬业度、管理成熟度等方面全方位诊断组织发展状况，激发组织活力。</p>
                                <p class="cneter3_bottom"></p>
                            </li>
                       </ul>
                    </div>
                </div>
            </div>
            <div class="banxin_center4">
               <div class="banxin">
                   <div class="center4_top">我们的客户</div>
                   <div class="center4_center">Our clients</div>
                   <div class="center4_bottom">

                   </div>
               </div>
            </div>
            <div class="banxin_center5">
                <div class="banxin">
                    <div class="center5_top">联系我们</div>
                    <div class="center5_center">Our clients</div>
                    <div class="center5_bottom">
                        <div class="center5_left">
                            <p>是否是我们的客户</p>
                            <p class="radio_d">
                                 <RadioGroup>
                                    <Radio style="font-size: 0.3rem;">是</Radio>
                                    <Radio style="margin-left:10px;font-size: 0.3rem;">否</Radio>
                                </RadioGroup>
                            </p>
                            <p class="lianxi">
                               <Row>
                                    <Col span="12">
                                       <p>姓名</p>
                                       <p>
                                           <input type="text" placeholder="请输入您的姓名">
                                       </p>
                                    </Col>
                                    <Col span="12">
                                        <p>联系方式</p>
                                         <p>
                                           <input type="text" placeholder="请输入您的联系方式">
                                       </p>
                                    </Col>
                               </Row>
                            </p>
                            <p class="lianxi">
                               <Row  class="row">
                                    <Col span="12">
                                       <p>公司名称</p>
                                       <p>
                                           <input type="text" placeholder="请输入您的公司名称">
                                       </p>
                                    </Col>
                                    <Col span="12">
                                        <p>邮箱地址</p>
                                         <p>
                                           <input type="text" placeholder="请输入您的邮箱地址">
                                       </p>
                                    </Col>
                               </Row>
                            </p>
                            <p class="lianxi">
                                <Row  class="row">
                                    <Col span="12">
                                       <p>员工数</p>
                                       <p>
                                           <input type="text" placeholder="请输入您的员工数">
                                       </p>
                                    </Col>
                                    <Col span="12">
                                    </Col>
                               </Row>
                            </p>
                        </div>
                        <div class="center5_right">
                             <p>您通过什么渠道了解我们的服务?</p>
                             <p class="select_d">
                                 <Select  filterable class="select">
                                    <Option label="张三" value="张三">张三</Option>
                                    <Option label="李四" value="李四">李四</Option>
                                    <Option label="王五" value="王五">王五</Option>
                                    <Option label="王麻子" value="王麻子">王麻子</Option>
                                </Select>
                             </p>
                             <p class="textarea_d">
                                 <span>留言：</span>
                                 <textarea name="" id="" cols="50" rows="5" placeholder="我想说" ></textarea>
                            </p>
                        </div>
                        <div class="bttn">点击提交<p></p></div>
                    </div>
                </div>
            </div>
            <div class="banxin_bottom">
                <div class="banxin">
                    <div class="bottom">
                        <div class="bottom_left">
                            <div>
                                <p>解决方案</p>
                                <p>solution</p>
                                <ul>
                                    <li>校园招聘解决方案
                                    <li>社会招聘解决方案</li>   
                                    <li>人才发展解决方案</li>   
                                    <li>人才盘点解决方案</li>   
                                    <li>组织发展解决方案</li> 
                                </ul>
                            </div>
                            <div>
                                 <p>人才测评</p>
                                 <p>Cooperation</p>
                                 <ul>
                                     <li>DISC测量系统</li>
                                 </ul>
                            </div>
                            <div>
                                  <p>关于我们</p>
                                  <p>About us</p>
                            </div>
                            <div>
                                  <p>联系我们</p>
                                  <p>Contact us</p>
                                  <ul>
                                      <li>电话：15210899450</li>
                                      <li class="cur">
                                            <Row>
                                                <Col span="10">地址:</Col>
                                                <Col span="14">深圳市宝安区西乡街道固戍社区骏翔U8智造产业园U5栋701</Col>
                                            </Row>
                                      </li>
                                  </ul>
                            </div>
                        </div>
                        <div class="bottom_right">
                            <div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banxin_footer">
                <div class="banxin">
                        <div class="banquan">
                            <Row>
                                <Col span="12">版权：Copyright</Col>
                                <Col span="12">备案号:沪ICP备</Col>
                            </Row>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import phone from './phone.less';
import pc from './pc.less';
import Swiper from 'swiper';
    export default {
        name: 'HelloWorld',
        data () {
            return {
            msg: 'Welcome to Your Vue.js App'
            }
        },
         created(){
            // window.onload = window.onresize = ()=>{ 
            //     console.log(this.IsPC())
            //     if (!this.IsPC()) { 
            //         this.bodyScale();
            //     } 
            // }
            ////////////////////
               setFontSize();

            // 改变窗口尺寸的时候，要重新设置字号
            window.onresize = setFontSize;

            function setFontSize(){
                // 得到屏幕宽度
                var windowWidth = document.documentElement.clientWidth;
                // 看看当前屏幕宽度是550的多少倍
                var rate = windowWidth / 550;
                if(rate > 1) rate = 1;
                if(rate < 320 / 550) rate = 320 / 550;
                // 就要设置字号是55的多少倍
                document.documentElement.style.fontSize = 55 * rate + 'px';
            }
        },
        methods:{
            IsPC() { 
                var userAgentInfo = navigator.userAgent; 
                var Agents = [
                    "Android", 
                    "iPhone", 
                    "SymbianOS",
                    "Windows Phone", 
                    "iPad",
                    "iPod" 
                ]; 
                var flag = true; 
                for (var v = 0; v < Agents.length; v++) { 
                if (userAgentInfo.indexOf(Agents[v]) > 0) { 
                    flag = false; 
                    break; 
                } 
                } 
                return flag; 
            }, 
            bodyScale() { 
                var devicewidth = document.documentElement.clientWidth; 
                var scale = devicewidth / 1365; // 分母——设计稿的尺寸 
                document.body.style.zoom = scale; 
            }, 
      },
        mounted(){
        
        var mySwiper = new Swiper('.swiper-container', {
             pagination:{
                el:'.swiper-pagination',
                clickable:true,
            },//这样写小圆点就有
             centeredSlides: true,	
 
            // 分页
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
 
            //    前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })
      },
    }
</script>
<style lang="less">
 
  
</style>